/*
import '@logicflow/core/dist/index.css'
import {onMounted} from 'vue'

import { LogicFlow, RectNode, RectNodeModel} from '@logicflow/core'
import {Control, DndPanel, Menu, SelectionSelect, Snapshot,BPMNElements } from "@logicflow/extension";
import "@logicflow/core/lib/style/index.css";
import "@logicflow/extension/lib/style/index.css";


// 注册扩展插件
LogicFlow.use(SelectionSelect)
LogicFlow.use(Control)
LogicFlow.use(DndPanel)
LogicFlow.use(Snapshot)//导出图片
LogicFlow.use(Menu)

// 定义图表数据，包含节点和边
const data = {
    nodes: []
}

// 在组件挂载时执行
onMounted(() => {
    // 创建 LogicFlow 实例
    const lf = new LogicFlow({
        container: document.getElementById('container')!, // 指定容器元素
        style: {
            baseNode: {
                fill: '#d5f6da', // 边的填充颜色
            },
            rect: {
                rx: 5, // 矩形节点的圆角 x 半径
                ry: 5, // 矩形节点的圆角 y 半径
            },
        },
        grid: true, // 启用网格
    });

    // 自定义拖拽面板
    lf.setPatternItems();

    const multiInstanceIcon: any = {
        parallel: parallelMarker,
        sequential: sequentialMarker,
        loop: loopMarker,
    }

    // 注册自定义节点
    class CustomNodeView extends RectNode {
        getLabelShape() {
            // @ts-ignore
            const { model } = this.props
            const { x, y, width, height } = model
            const style = model.getNodeStyle()
            const i = Array.isArray(userTaskIcon)
                ? h(
                    'g',
                    {
                        transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
                    },
                    ...userTaskIcon,
                )
                : h('path', {
                    fill: style.stroke,
                    d: userTaskIcon,
                })
            return h(
                'svg',
                {
                    x: x - width / 2 + 5,
                    y: y - height / 2 + 5,
                    width: 25,
                    height: 25,
                    viewBox: '0 0 1274 1024',
                },
                i,
            )
        }

        getShape() {
            // @ts-ignore
            const { model } = this.props
            const { x, y, width, height, radius, properties } = model
            const style = model.getNodeStyle()
            return h('g', {}, [
                h('rect', {
                    ...style,
                    x: x - width / 2,
                    y: y - height / 2,
                    rx: radius,
                    ry: radius,
                    width,
                    height,
                    opacity: 0.95,
                }),
                this.getLabelShape(),
                h(
                    'g',
                    {
                        transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`,
                    },
                    h('path', {
                        fill: 'white',
                        strokeLinecap: 'round',
                        strokeLinejoin: 'round',
                        stroke: 'rgb(34, 36, 42)',
                        strokeWidth: '2',
                        d: multiInstanceIcon[properties.multiInstanceType as any] || '', // TODO: 确认 properties.multiInstanceType 的类型
                    }),
                ),
            ])
        }
    }

    class CustomNodeModel extends RectNodeModel {
        setAttributes() {
            super.setAttributes()
            this.myNodeType = 'UserTask'
        }
    }

    lf.register({
        type: 'my-rect',
        view: CustomNodeView,
        model: CustomNodeModel,
    })


    // 渲染图表数据
    lf.render(data)
    // 保存为图片并下载
    document.getElementById('exportImg')!!.addEventListener('click', () => {
        lf.getSnapshot()
    })
    const {eventCenter} = lf.graphModel;

    eventCenter.on("node:click", (args) => {
        console.log("节点点击事件", args, args.data.properties);
    });
    eventCenter.on("edge:add", (args) => {
        console.log("edge:add", args, args.data.properties);
    });
})


// 用户任务图标
export const userTaskIcon =
    'M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z'

// marker
export const parallelMarker =
    'm44,60 m 3,2 l 0,10 m 3,-10 l 0,10 m 3,-10 l 0,10'

export const sequentialMarker =
    'm47,61 m 0,3 l 10,0 m -10,3 l 10,0 m -10,3 l 10,0'

export const loopMarker =
    'm 50,73 c 3.526979,0 6.386161,-2.829858 6.386161,-6.320661 0,-3.490806 -2.859182,-6.320661 -6.386161,-6.320661 -3.526978,0 -6.38616,2.829855 -6.38616,6.320661 0,1.745402 0.714797,3.325567 1.870463,4.469381 0.577834,0.571908 1.265885,1.034728 2.029916,1.35457 l -0.718163,-3.909793 m 0.718163,3.909793 -3.885211,0.802902'
*/
